In this Chapter

1. Baked-in Analytics
2. Javascript function for adding analytics
3. analytics_link_to tag

At this point we’ve built up a fairly complex tab with 4 main pages, most of which include sub-pages of their own, and several feature blocks bringing in different types of content. What we lack is a way to track our users interaction with the things we’ve built. Without that tracking we have no way to know whether anyone is even using our tools or to measure ROI and everything else we’ve done becomes specious. Analytics is what allows us to make that tracking happen and is one of the most important tools available on the SML platform.

First of all, AMP tracks a number of things by default for any tab which has been added to your AMP account. You can refer to our Analytics Guide for a detailed breakdown. The big value added to Analytics in SML, however, is that those backed-in metrics are just the starting point. Let’s begin by using the analytics_link_to tag to add some custom tracking to our welcome page.

{% partial name:"landing_page" %}
    {% editable_html name:"welcome_text" %}

    <p>You can find more information about Our Brand on
    {% analytics_link_to url:"http://OurWebsite.com" text:"our website" %}.</p>
{% endpartial %}

<div id="content_box">
    {% render partial:"landing_page" %}
</div>

As you can see, analytics_link_to is very simple, it’s essentially just a proxy that creates an html anchor wrapped around the text specified in the text attribute and attaches the tracking JavaScript to it automatically. This is an ideal tool for people with limited development experience who don’t feel comfortable working in JavaScript.

If you want more control and the ability to track other interactions besides text link clicks, you can use SML’s baked-in Javascript tracking functions. These are:

Analytics.logAction(name, params)
Analytics.logClickthrough(name, user_identifier, content_item_id)
Analytics.logClickthroughRedirect(name, destination, user_identifier, content_item_id)

The data types for the params in these functions are:

Which one of the three you use depends on what data you want to track. Analytics.logAction(name, params), as implied by the name, logs an item name and what parameters are associated with that item when it is activated. It is ideal for tracking interaction with content items - video plays, clicks on read-more links that display the content inline, things like that, and other interactions with content that do not involve clicking to another url.

For user actions that send people away from your tab, such as links to other tabs or to your website, you can use Analytics.logClickthrough(name, user_identifier, content_item_id) or Analytics.logClickthrough(name, user_identifier, content_item_id). Which of those you use depends on whether you’re tracking a clickthrough with a redirect or not.

When setting up the tracking you have a few different options. Virtually all interact-able elements in SML include hooks like onclick, onfirstclick, onsuccess, onerror, etc (refer to the docs for the feature you’re using to check which hooks are available).

Let’s start by adding tracking to the signup_forms on the Sweepstakes page so we can track entries. We already have an onsuccess hook in place that points to a remote JavaScript function so we can simply embed our tracking function inside the showThankYouMessage() function.

function showThankYouMessage() {
  sml.get('signup_div').hide();
  sml.get('thank_you_message').show();
  Analytics.logAction('Sweepstakes Submission', 'klout_score')
}

Because we’ve attached the function to a remote JavaScript function that is called by all 4 instances of the signup form (english low klout, english high klout, spanish low klout, spanish high klout) it will run for all four. If we’d included it directly inline we’d have had to past into the code four different times!

We can also use JQuery to attach analytics functions to classes or html elements. Let's add a blanket function that will be triggered every time an anchor on the page is clicked and record the destination that the link.

<script>
$("a").click(function() {
	Analytics.logAction('link_click', { url : $(this).attr('href') });
}
</script>

Alternately, you could reduce your javascript overhead by assigning the function to the window (1 object) instead of the anchors (many objects) by writing

$(window).delegate('a','click',function(event){
   Analytics.logAction('link_click', { url : $(this).attr('href') });
});

But the disadvantage to doing it this way is that if the anchor is wrapped around another tag (like an image, for instance) it won’t fire. There’s a silver lining though in that this would allow us to log different actions for text link clicks and image link clicks, like so:

$(window)
 .delegate('a','click',function(event){
   Analytics.logAction('Link Clicked', {
       url : $(this).attr('href')
   });
 })
 .delegate('a img', 'click', function(event){
   Analytics.logAction('Image Link Clicked',{
       href: $(this).parent('a').attr('href') || '#'
   });
 })

This is just the beginning of what is possible for custom tracking in SML tabs. Your only real limits are your skill with JavaScript and your imagination.